This pull request introduces significant improvements to the calendar component, focusing on enhancing the user experience when selecting time slots and visualizing events. The main changes include the addition of a selection preview feature, refactoring of selection logic, improved event rendering, and several UI/UX tweaks for better clarity and usability.

stuff changed

• Added a selection preview feature that visually highlights the user's current selection on the calendar. This is managed through new state (selectionPreviewEvents) and logic in CalendarComponent.jsx, with supporting utility functions in the new selectionUtils.js. The preview is dynamically updated or cleared as the user interacts with the calendar.
• Refactored calendar selection logic to use new utility functions for normalizing selection windows, calculating slot ranges, and mapping days, resulting in more robust and maintainable code.
• Updated the calendar configuration to support the selection preview, improved day header formatting, and added custom styles for pinned events. The configuration now also handles unselect events.
• Improved event rendering to better display instructor information and visually distinguish pinned events. Event content layout and padding were refined for clarity, especially on mobile.
• Updated styles for the current day highlight, event font sizes (especially for smaller screens), and ensured the accent color is used for today's background.

pics

before	after